{% stylesheet %}
.block_testimonials .container {
  display: flex;
}

@media screen and (max-width: 767px) {
  .block_testimonials .container {
    flex-direction: column;
  }
}

.block_testimonials .container .left_box {
  flex: 0 0 25%;
}

@media screen and (max-width: 767px) {
  .block_testimonials .container .left_box {
    flex: 0 0 100%;
  }
}

.block_testimonials .container .right_box {
  flex: 0 0 75%;
}

@media screen and (max-width: 767px) {
  .block_testimonials .container .right_box {
    flex: 0 0 100%;
  }
}

.block_testimonials .left_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.block_testimonials .left_box .subtitle {
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--title_color);
  opacity: 0.75;
  font-weight: 600;
}

.block_testimonials .right_box {
  overflow: hidden;
}

.block_testimonials .right_box .swiper {
  width: 100%;
  overflow: hidden;
}

.block_testimonials .right_box .swiper-slide {
  box-sizing: border-box;
  padding: 37px;
  border: 1px solid rgba(28, 24, 26, 0.3);
}

.block_testimonials .right_box .swiper-slide .slide_title {
  font-size: 24px;
  font-family: var(--title_font_family);
  font-style: var(--title_font_style);
  font-weight: var(--title_font_weigth);
  color: var(--title_color);
}

.block_testimonials .right_box .swiper-slide .star {
  margin-top: 24px;
}

.block_testimonials .right_box .swiper-slide .star svg {
  width: 20px;
  height: 20px;
}

.block_testimonials .right_box .swiper-slide .star svg path {
  fill: #cab8c0;
}

.block_testimonials .right_box .swiper-slide .testimonials__slide-meta {
  margin-top: 24px;
}

.block_testimonials .right_box .swiper-slide .testimonials__slide-meta .testimonials__slide-country {
  opacity: .75;
}

.block_testimonials .right_box .swiper-slide .testimonials__slide-meta .testimonials__slide-country:before {
  content: ' / ';
}

.block_testimonials .swiper_btn_box {
  position: relative;
  display: flex;
  align-items: center;
}

.block_testimonials .swiper_btn_box .swiper-pagination-my {
  width: auto;
  margin: 0 20px;
}

.block_testimonials .btn_wrap {
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block_testimonials .swiper-button-next-my,
.block_testimonials .swiper-button-prev-my {
  cursor: pointer;
  top: 0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
  outline: none;
  height: 44px;
  width: 44px;
}

.block_testimonials .swiper-button-next-my:hover,
.block_testimonials .swiper-button-prev-my:hover {
  border-color: #211c1c;
}

.block_testimonials .swiper-button-next-my svg,
.block_testimonials .swiper-button-prev-my svg {
  width: 12px;
  height: 12px;
}

{% endstylesheet %}
{% assign data = section.settings %}
<div class="block_testimonials">
    <div class="container_wrapper">
        <div class="container">
            <div class="left_box">
                <div>
                    {% if data.subtitle != '' %}
                    <div class="subtitle">{{data.subtitle}}</div>
                    {% endif %}
                    {% if data.title != '' %}
                    <div class="title_section general_title-color">{{data.title}}</div>
                    {% endif %}
                </div>
                <div class="swiper_btn_box">
                    <div class="btn_wrap">
                        <div class="swiper-button-next-my">
                            <svg viewBox="0 0 10 16" fill="none" role="presentation" class="icon icon-caret-left"
                                aria-hidden="true" focusable="false">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M1.58188 7.76454L0.874768 8.47165L1.58188 9.17876L7.66722 15.2641L8.37433 14.557L2.28898 8.47165L8.37433 2.38631L7.66722 1.6792L1.58188 7.76454Z"
                                    fill="currentColor"></path>
                                <path
                                    d="M0.874768 8.47165L0.521215 8.1181L0.16766 8.47165L0.521215 8.8252L0.874768 8.47165ZM1.58188 7.76454L1.93543 8.1181L1.93543 8.1181L1.58188 7.76454ZM1.58188 9.17876L1.93543 8.8252L1.93543 8.8252L1.58188 9.17876ZM7.66722 15.2641L7.31367 15.6177L7.66722 15.9712L8.02077 15.6177L7.66722 15.2641ZM8.37433 14.557L8.72788 14.9106L9.08143 14.557L8.72788 14.2034L8.37433 14.557ZM2.28898 8.47165L1.93543 8.1181L1.58188 8.47165L1.93543 8.8252L2.28898 8.47165ZM8.37433 2.38631L8.72788 2.73986L9.08144 2.38631L8.72788 2.03275L8.37433 2.38631ZM7.66722 1.6792L8.02078 1.32565L7.66722 0.972092L7.31367 1.32565L7.66722 1.6792ZM1.22832 8.8252L1.93543 8.1181L1.22832 7.41099L0.521215 8.1181L1.22832 8.8252ZM1.93543 8.8252L1.22832 8.1181L0.521215 8.8252L1.22832 9.53231L1.93543 8.8252ZM8.02077 14.9105L1.93543 8.8252L1.22832 9.53231L7.31367 15.6177L8.02077 14.9105ZM8.02077 14.2034L7.31367 14.9105L8.02077 15.6177L8.72788 14.9106L8.02077 14.2034ZM1.93543 8.8252L8.02077 14.9106L8.72788 14.2034L2.64254 8.1181L1.93543 8.8252ZM8.02078 2.03275L1.93543 8.1181L2.64254 8.8252L8.72788 2.73986L8.02078 2.03275ZM7.31367 2.03275L8.02078 2.73986L8.72788 2.03275L8.02078 1.32565L7.31367 2.03275ZM1.93543 8.1181L8.02078 2.03275L7.31367 1.32565L1.22832 7.41099L1.93543 8.1181Z"
                                    fill="currentColor"></path>
                            </svg>
                        </div>
                        <div class="swiper-pagination-my" id="swiper-pagination-my_{{ block_id | default : section.block_id  }}"></div>
                        <div class="swiper-button-prev-my">
                            <svg viewBox="0 0 10 16" fill="none" role="presentation" class="icon icon-caret-right"
                                aria-hidden="true" focusable="false">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M8.30497 9.17881L9.01207 8.47171L8.30497 7.7646L2.21962 1.67926L1.51251 2.38636L7.59786 8.47171L1.51251 14.5571L2.21962 15.2642L8.30497 9.17881Z"
                                    fill="currentColor"></path>
                                <path
                                    d="M9.01207 8.47171L9.36563 8.82526L9.71918 8.47171L9.36563 8.11815L9.01207 8.47171ZM8.30497 9.17881L7.95141 8.82526V8.82526L8.30497 9.17881ZM8.30497 7.7646L7.95141 8.11816V8.11816L8.30497 7.7646ZM2.21962 1.67926L2.57317 1.3257L2.21962 0.97215L1.86607 1.3257L2.21962 1.67926ZM1.51251 2.38636L1.15896 2.03281L0.805407 2.38636L1.15896 2.73992L1.51251 2.38636ZM7.59786 8.47171L7.95141 8.82526L8.30497 8.47171L7.95141 8.11816L7.59786 8.47171ZM1.51251 14.5571L1.15896 14.2035L0.805405 14.5571L1.15896 14.9106L1.51251 14.5571ZM2.21962 15.2642L1.86607 15.6177L2.21962 15.9713L2.57317 15.6177L2.21962 15.2642ZM8.65852 8.11815L7.95141 8.82526L8.65852 9.53237L9.36563 8.82526L8.65852 8.11815ZM7.95141 8.11816L8.65852 8.82526L9.36563 8.11815L8.65852 7.41105L7.95141 8.11816ZM1.86607 2.03281L7.95141 8.11816L8.65852 7.41105L2.57317 1.3257L1.86607 2.03281ZM1.86607 2.73992L2.57317 2.03281L1.86607 1.3257L1.15896 2.03281L1.86607 2.73992ZM7.95141 8.11816L1.86607 2.03281L1.15896 2.73992L7.24431 8.82526L7.95141 8.11816ZM1.86607 14.9106L7.95141 8.82526L7.24431 8.11816L1.15896 14.2035L1.86607 14.9106ZM2.57317 14.9106L1.86607 14.2035L1.15896 14.9106L1.86607 15.6177L2.57317 14.9106ZM7.95141 8.82526L1.86607 14.9106L2.57317 15.6177L8.65852 9.53237L7.95141 8.82526Z"
                                    fill="currentColor"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right_box">
                <div class="swiper" id="testimonials_swiper_{{ block_id | default : section.block_id  }}">
                    <ul class="swiper-wrapper">
                        {% for block in section.blocks %}
                        <li class="swiper-slide">
                            {% if block.title != '' %}
                            <div class="slide_title">{{block.title}}</div>
                            {% endif %}
                            <div class="star">
                                {% for i in (1..block.star) %}
                                {% include 'icon_star' %}
                                {% endfor %}
                            </div>
                            <div class="testimonials__slide-meta">
                                {% if block.name != '' %}
                                <span class="testimonials__slide-name">{{block.name}}</span>
                                {% endif %}
                                {% if block.country != '' %}
                                <span class="testimonials__slide-country">{{block.country}}</span>
                                {% endif %}
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
(function(){(function () {
  let swiper = null;
  let timer = null;
  swiper = new Swiper(
    "#testimonials_swiper_{{ block_id | default : section.block_id  }}",
    {
      loop: true,
      slidesPerView: $(window).width() < 768 ? 1 : 2,
      spaceBetween: 20,
      navigation: {
        nextEl: ".swiper-button-prev-my",
        prevEl: ".swiper-button-next-my",
      },
      pagination: {
        el: "#swiper-pagination-my_{{ block_id | default : section.block_id  }}",
        type: "fraction",
      }
    }
  );
  $(window).on("resize", function () {
    clearTimeout(timer)
    timer = setTimeout(() => {
      swiper.destroy(true, true)
      swiper = null;
      swiper = new Swiper(
        "#testimonials_swiper_{{ block_id | default : section.block_id  }}",
        {
          loop: true,
          slidesPerView: $(window).width() < 768 ? 1 : 2,
          spaceBetween: 20,
          navigation: {
            nextEl: ".swiper-button-prev-my",
            prevEl: ".swiper-button-next-my",
          },
          pagination: {
            el: "#swiper-pagination-my_{{ block_id | default : section.block_id  }}",
            type: "fraction",
          },
        }
      );
    }, 100);
  });
})();
})()
</script>
{% schema %}
{
	"tag": "",
	"class": "block_testimonials",
	"is_global": false,
	"icon": "icon-lunbotu",
	"name": {
		"zh_CN": "团队介绍",
		"en_US": "Team Introduction"
	},
	"max_blocks": "10",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": ""
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "二级标题",
				"en_US": "Secondary title"
			},
			"id": "subtitle",
			"default": ""
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "列表项",
				"en_US": "List item"
			},
			"type": "slide-item",
			"settings": [
				{
					"type": "card_input",
					"label": {
						"zh_CN": "标题",
						"en_US": "Title"
					},
					"id": "title",
					"default": ""
				},
				{
					"type": "card_slider",
					"label": {
						"zh_CN": "星级",
						"en_US": "Star rating"
					},
					"id": "star",
					"max": 5,
					"min": 1,
					"unit": "",
					"default": 5
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "名称",
						"en_US": "Name"
					},
					"id": "name",
					"default": ""
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "国家",
						"en_US": "The State"
					},
					"id": "country",
					"default": ""
				}
			]
		}
	],
	"default": {
		"settings": {
			"title": "We Value Each of Our Customers",
			"subtitle": "what clients are saying"
		},
		"blocks": [
			{
				"title": "“Great service, fast shipping with beautiful products.”",
				"star": 5,
				"name": "Alex S.",
				"country": "New York, USA",
				"block_type": "slide-item"
			},
			{
				"title": "“Great service, fast shipping with beautiful products.”",
				"star": 5,
				"name": "Alex S.",
				"country": "New York, USA",
				"block_type": "slide-item"
			}
		]
	}
}
{% endschema %}